<template>
    <h2>列表渲染</h2>
    <span>
        <!-- 无需列表（ul） 有序列表(ol) -->
        <ol>
            <li v-for="item in arr">学号：{{item.stuid}}&nbsp;&nbsp;姓名：{{  item.stuName }}&nbsp;&nbsp;年龄：{{ item.Stuage }}</li>
        </ol>

    </span>
    <table border="1" >
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>年龄</th>
             </tr>
        </thead>
        <tbody>
            <tr v-for="itme in arr">
                <td >{{ itme.stuid }}</td>
                <td>{{ itme.stuName }}</td>
                <td>{{ itme.Stuage }}岁</td>
             </tr>   
        </tbody>

    </table>
    <span>
        {{ num }}
        <button @click="num++">{{ num }}</button>
    </span>

</template>
<script setup lang="ts">
import {ref} from "vue"
//通过ref响应式数据创建number类型数组
const arr=ref([
        {stuid:1,stuName:'张三',Stuage:'18'},
{stuid:2,stuName:'李四',Stuage:'19'},
{stuid:3,stuName:'王五',Stuage:'20'}
]);
const num=ref(99);
// num.value++;
// alert(num.value)

</script>